<template>
    <div class="aptitudeEdit">
        <h5>发布规则/协议</h5>
        <ul class="inp-ul">
            <li>
                <span class="title">*一级类目</span>
                <el-select v-model="valueLevel1" placeholder="请选择">
                    <el-option v-for="item in addoptions1"  :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                </el-select>
                <span class="my-btn btn" style="color:#444;" @click="popTab(0,'一')">添加一级类目</span>
            </li>
            <li>
                <span class="title">二级类目</span>
                <el-select class="select2" v-model="valueLevel2" placeholder="请选择">
                    <el-option v-for="item in addoptions2"  :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                </el-select>
                <span class="my-btn btn" style="color:#444;" @click="popTab(valueLevel1,'二')">添加二级类目</span>
            </li>
            <li>
                <span class="title">三级类目</span>
                 <el-select class="select3" v-model="valueLevel3" placeholder="请选择">
                    <el-option v-for="item in addoptions3"  :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                </el-select>
                <span class="my-btn btn" style="color:#444;" @click="popTab(valueLevel2,'三')">添加三级类目</span>
            </li>
            <li>
                <span class="title" >*名称</span>
                <input type="text" v-model="nameinpValue" placeholder="请输入名称">
            </li>
            <li style="align-items: flex-start;">
                <span class="title">*内容</span>
                <quill-editor 
                    v-model="content" 
                    ref="myQuillEditor" 
                    :options="editorOption" 
                    @change="onEditorChange($event)">
                </quill-editor>
            </li>
            <li style="margin-top:20px;">
                <span>是否上架</span>
                <el-select v-model="statusinpValue" placeholder="请选择">
                    <el-option v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
            </li>
        </ul>
        <div class="btn-box">
            <span class="my-btn btn btn2" style="margin:0;" @click="goback">取消</span>
            <span class="my-btn btn btn2 my-background" @click="gopreview">预览</span>
            <span class="my-btn btn btn2 my-background" @click="releaseClick">发布</span>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>添加{{categoryNum}}级类目</span>
                    <span @click="masknum=false"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        <span>名称</span>
                        <span>type</span>
                    </li>
                    <li class="item">
                        <span>
                            <input type="text" v-model="nameValue">
                        </span>
                        <span>
                            <el-select v-model="statusValue" placeholder="请选择">
                                <el-option v-for="item in statusoptions"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                            </el-select>
                        </span>
                    </li>
                </ul>
                <div class="btn-box">
                    <span @click="addcategory">提交</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    components: {
        quillEditor
    },
    data(){
        return{
            masknum:false,
            categoryNum:'',
            valueLevel:'',
            options: [//是否上架options
                {
                    value: 1,
                    label: '是'
                },
                {
                    value: 0,
                    label: '否'
                },
            ],
            statusoptions: [//遮罩层options
                {
                    value: 0,
                    label: '顶级'
                },
                {
                    value: 1,
                    label: '父级'
                },
                {
                    value: 2,
                    label: '子级'
                }
            ],
            nameinpValue:'',//名称
            statusinpValue:1,//是否上架
            nameValue:'',//遮罩层添加类目名称
            statusValue:'',//遮罩层type
            valueLevel1:'',//一级类目选中值
            valueLevel2:'',//二级类目选中值
            valueLevel3:'',//三级类目选中值
            namevalueLevel1:'',//一级类目选中名称
            namevalueLevel2:'',//二级类目选中名称
            namevalueLevel3:'',//三级类目选中名称
            addoptions1: [],//一级类目表
            addoptions2:[],//二级类目表
            addoptions3:[],//三级类目表
            //富文本
            content:'' ,//富文本框内容
            str:'',
            editorOption: {},
            agreementEntity:{
                	"categoryName": "",
                    "content": "",
                    "creationTime": '',
                    "id": 0,
                    "labelId": 0,
                    "name": "",
                    "pid": 0,
                    "status": 0,
                    "type": 0
            }
        }
    },
    mounted(){
        this.getaddoptions1()
    },
    methods:{
        //弹窗
        popTab(valueLevel,n){
            this.masknum=true
            this.categoryNum=n
            this.valueLevel=valueLevel
        },
        //添加类目
        addcategory(){
            this.axios.post('/operate/sys/Agreement/Categorysave?pid=' + this.valueLevel +'&name=' + this.nameValue +'&type=' +this.statusValue).then(res=>{
                console.log(res)
                this.masknum=false
                if(this.categoryNum=='一'){
                    this.getaddoptions1()
                }else if(this.categoryNum=='二'){
                    this.getaddoptions2()
                }else if(this.categoryNum=='三'){
                    this.getaddoptions3()
                }
            })
        },
        //获取一级类目
        getaddoptions1(){
            // this.valueLevel1=''
            // this.valueLevel2=''
            // this.valueLevel3=''
            this.axios.get('/operate/sys/Agreement/label?pid=0').then(res=>{
                this.addoptions1=res.data.list
                for(var i=0;i<this.addoptions1.length;i++){
                    if(this.addoptions1[i].type==2){
                        this.addoptions1.splice(i,1)
                    }
                }
                console.log('addoptions1',this.addoptions1)
            })
        },
        //获取二级类目
        getaddoptions2(){
            this.valueLevel2=''
            this.valueLevel3=''
            console.log('this.valueLevel1',this.valueLevel1)
            this.axios.get('/operate/sys/Agreement/label?pid='+this.valueLevel1).then(res=>{
                this.addoptions2=res.data.list
                for(var i=0;i<this.addoptions2.length;i++){
                    if(this.addoptions2[i].type==2){
                        this.addoptions2.splice(i,1)
                    }
                }
                console.log('addoptions2',this.addoptions2)
            })
        },
        //获取三级类目
        getaddoptions3(){
            this.tableData=[]
            this.valueLevel3=''
            console.log('this.valueLevel2',this.valueLevel2)
            this.axios.get('/operate/sys/Agreement/label?pid='+this.valueLevel2).then(res=>{
                this.addoptions3=res.data.list
                for(var i=0;i<this.addoptions3.length;i++){
                    if(this.addoptions3[i].type==2){
                        this.addoptions3.splice(i,1)
                    }
                }
                console.log('addoptions3',this.addoptions3)
            })
        },
        //取消
        goback(){
            this.$router.push('/index/aptitude')
        },
        //跳转预览
        gopreview(){
            var inpData={
                name:'',
                content:'',
                pid:'',
                creationTime:'',
                type:'',
                labelId:'',
                status:'',
                nameLevel1:'',
                nameLevel2:'',
                nameLevel3:'',
            }
            inpData.name=this.nameinpValue
            inpData.content=this.content
            inpData.status=this.statusinpValue
            inpData.type=2
            inpData.pid=this.valueLevel1?this.valueLevel2?this.valueLevel3?this.valueLevel3:this.valueLevel2:this.valueLevel1:0
            inpData.nameLevel1=this.namevalueLevel1
            inpData.nameLevel2=this.namevalueLevel2
            inpData.nameLevel3=this.namevalueLevel3
            this.$router.push({path:'/index/aptitudeDetails',query:{type:3,inpData:inpData}})
        },
        //发布
        releaseClick(){
            this.agreementEntity.content=this.content
            this.agreementEntity.creationTime=Date.parse(new Date())/1000
            this.agreementEntity.name=this.nameinpValue
            this.agreementEntity.pid=this.valueLevel1?this.valueLevel2?this.valueLevel3?this.valueLevel3:this.valueLevel2:this.valueLevel1:0
            this.agreementEntity.status=this.statusinpValue
            this.agreementEntity.type=1
            console.log('agreementEntity222',this.agreementEntity)
            this.axios({
                url:'/operate/sys/Agreement/save',
                method:'post',
                data:JSON.stringify(this.agreementEntity),
                headers: {'Content-Type': 'application/json;charset=UTF-8'}
            }).then(res=>{console.log(res.data)})
            this.$router.go(-1)
        },
        //内容改变事件
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    watch:{
        valueLevel1(){
            this.getaddoptions2()
            this.addoptions1.forEach(e => {
                if(e.id==this.valueLevel1){
                    this.namevalueLevel1=e.categoryName
                }
            });
        },
        valueLevel2(){
            this.getaddoptions3()
            this.addoptions2.forEach(e => {
                if(e.id==this.valueLevel2){
                    this.namevalueLevel2=e.categoryName
                }
            });
        },
        valueLevel3(){
            this.addoptions3.forEach(e => {
                if(e.id==this.valueLevel3){
                    this.namevalueLevel3=e.categoryName
                }
            });
        },
    }
}
</script>

<style scoped>
.inp-ul{
    width: 100%;
    margin-top: 30px;
}
.inp-ul>li{
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-items: center;
    
}
.inp-ul>li>span:first-child{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.inp-ul>li:nth-child(5){
    align-items: flex-start;
}
.btn-box{
    padding: 10px 50px;
    margin-top: 50px!important;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.btn2{
    width: 100px;
    text-align: center;
}
textarea{
    width: 600px;
    height: 200px;
    padding: 5px 10px;
}
input{
    width: 210px;
    padding-left: 15px;
}
input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}


/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 580px;
    height: 320px;
    overflow: auto;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
    box-sizing: border-box;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 30px;
}
.content-items .item{
    margin:20px 10px;
    position: relative;
}
.content-items .item span{
    display: inline-block;
    width: 240px;
    text-align: center;
    margin-right: 20px;
}
.content-items .item span:last-child{
    width: 120px;
}
.mask .btn-box{
    text-align: center;
    margin: 30px;
    margin-bottom: 0;
}
.mask .btn-box span{
    display: inline-block;
    padding: 5px 30px;
    border-radius: 5px;
    background: #FDD94C;
    color: #fff;
}
</style>

<style>
.el-select{
}
.ql-toolbar.ql-snow + .ql-container.ql-snow{
    min-height: 230px;
}
.aptitudeEdit .quill-editor{
    width: calc(100% - 90px);
}
</style>